<template>
  <view class="page-wrapper store jeepay-edit-form">
    <uni-forms ref="formRef" :rules="rules" :model="vdata.formData" :label-width="140">
      <uni-forms-item required label="门店名称" name="storeName">
        <uni-easyinput v-model="vdata.formData.storeName" placeholder="请输入门店名称" :inputBorder="false"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item required label="联系人电话" name="contactPhone">
        <uni-easyinput v-model="vdata.formData.contactPhone" placeholder="联系人电话" :inputBorder="false"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item required label="备注" name="remark" class="line">
        <uni-easyinput v-model="vdata.formData.remark" placeholder="备注" :inputBorder="false"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item required label="门店地址" name="address">
        <view class="selected-sex"
          :style="{ alignItems: vdata.formData.address ? 'flex-end' : '', color: vdata.formData.lng ? '#000' : '' }" @tap="showMap">
          {{ vdata.formData.address || '选择地址后自动回显' }}
          <image class="left-image" src="/static/iconImg/icon-arrow-small.svg" mode="scaleToFill" />
        </view>
      </uni-forms-item>
      <uni-forms-item required label="省市区/县" name="areaCode">
        <JeepayAreacodeSelect ref="jeepayAreacodeSelect" v-model:areacodeList="vdata.formData.areaCode" />
      </uni-forms-item>
      <uni-forms-item required label="经纬度" name="lngAndLat" class="line">
        <view class="selected-sex" :style="{ color: vdata.formData.lng ? '#000' : '' }"> {{ vdata.formData.lng }}/{{
          vdata.formData.lat }} </view>
      </uni-forms-item>
      <uni-forms-item required label="门店类目" name="shopCategory" v-if="vdata.type">
        <JeepayAreacodeSelect ref="jeepayAreacodeSelect" type="mccAli"
          v-model:areacodeList="vdata.formData.shopCategory" />
      </uni-forms-item>
      <uni-forms-item required label="经营类型" name="shopType" v-if="vdata.type && !['99', '031'].includes(vdata.aliStatus)">
        <JeepayRadioPopupView label="请选门店经营类型" v-model:value="vdata.formData.shopType"
          :list="[{ label: '直营', value: '01' }, { label: '加盟', value: '02' }]">
        </JeepayRadioPopupView>
      </uni-forms-item>

      <uni-forms-item required label="门店Logo" name="storeLogo" v-if="!vdata.type">
        <view class="selected-sex">
          <JeepayUploadImg v-model:src="vdata.formData.storeLogo" bizType="applyment" />
        </view>
      </uni-forms-item>

      <uni-forms-item required label="门头照" name="storeOuterImg" v-if="!vdata.type">
        <view class="selected-sex">
          <JeepayUploadImg v-model:src="vdata.formData.storeOuterImg" bizType="applyment" />
        </view>

      </uni-forms-item>

      <uni-forms-item required label="门店内景照" name="storeInnerImg" v-if="!vdata.type">
        <view class="selected-sex">
          <JeepayUploadImg v-model:src="vdata.formData.storeInnerImg" bizType="applyment" />
        </view>
      </uni-forms-item>
    </uni-forms>

    <view class="confirm-wrapper" v-if="vdata.aliStatus">
      <view class="confirm-button flex-center" hover-class="touch-button" @tap="confirmFunc">
        保存
      </view>
    </view>

    <view class="confirm-wrapper" v-else>
      <view class="confirm-button flex-center" hover-class="touch-button" @tap="confirmFunc">
        {{ vdata.storeId ? '确认修改' : '确认创建' }}
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { $location2areacode, reqLoad, API_URL_MCH_STORE_LIST, API_URI_DEV_RUYI } from '@/http/apiManager.js'
import infoBox from '@/commons/utils/infoBox.js';
import go from '@/commons/utils/go.js'
import formUtil from '@/commons/utils/formUtil.js'
import emit from '@/commons/utils/emit.js'
import cal from '@/commons/utils/cal.js'

const jeepayAreacodeSelect = ref()
const formRef = ref()

onLoad((options) => {
  if (options.type == 'aliStore' && options.aliStatus == '0') {
    uni.setNavigationBarTitle({
      title: '同步蚂蚁店铺'
    });
  } else if (options.type) {
    uni.setNavigationBarTitle({
      title: '修改蚂蚁店铺'
    });
  }
  // 修改页面 
  if (options.storeId) {
    vdata.storeId = options.storeId
    vdata.type = options.type
    vdata.aliStatus = options.aliStatus
    reqLoad.getById((options.type == 'aliStore' && ['99', '031'].includes(vdata.aliStatus)) ? API_URI_DEV_RUYI : API_URL_MCH_STORE_LIST, vdata.storeId).then(({ bizData }) => {
      vdata.formData = bizData
    })
  }

})


const rules = {
  storeName: {
    rules: [formUtil.rules.requiredInput('')],
  },
  contactPhone: {
    rules: [formUtil.rules.requiredInput(''), formUtil.rules.patternRule('联系人电话', formUtil.regexp.mobile)],
  },
  address: {
    rules: [formUtil.rules.requiredSelect('门店地址')],
  },
  areaCode: {
    rules: [formUtil.rules.requiredInput('省市县')],
  },
  storeLogo: {
    rules: [formUtil.rules.requiredUpload('门店Logo')],
  },
  storeOuterImg: {
    rules: [formUtil.rules.requiredUpload('门头照')],
  },
  storeInnerImg: {
    rules: [formUtil.rules.requiredUpload('门店内景照')],
  },
  shopCategory: {
    rules: [formUtil.rules.requiredInput('门店类型')],
  },
  shopType: {
    rules: [formUtil.rules.requiredInput('经营类型')],
  },
}


const vdata = reactive({

  storeId: null, // 新建 or 修改 

  formData: {} // 表单数据 

})

// 选择地图
function showMap () {

  // 本地 测试选择 
  // return test();

  // 打开地图 && 获取省市县
  uni.chooseLocation().then((res) => {
    console.log(res);
    vdata.formData.lng = res.longitude.toFixed(6) // IOS 小程序中：  经纬度12位。 
    vdata.formData.lat = res.latitude.toFixed(6)
    vdata.formData.address = res.name

    // 经纬度 --》 获取到省市县编码
    $location2areacode(vdata.formData.lng + "," + vdata.formData.lat).then(({ bizData }) => {
      if (bizData && bizData.areacode) {
        jeepayAreacodeSelect.value.resetBySingleAreacode(bizData.areacode)
      }
    })
  })
}


function test () {
  vdata.formData.lng = '116.099'
  vdata.formData.lat = '39.84548'
  vdata.formData.address = '测试地址'
  // 经纬度 --》 获取到省市县编码
  $location2areacode(vdata.formData.lng + "," + vdata.formData.lat).then(({ bizData }) => {
    if (bizData && bizData.areacode) {
      jeepayAreacodeSelect.value.resetBySingleAreacode(bizData.areacode)
    }
  })
}


function confirmFunc () {
  const goBack = () => {
    emit.pageEmit(emit.ENAME_REF_STORE_LIST) // 更新列表
    go.back(1, emit.ENAME_REF_STORE_DETAIL) // 返回详情 && 更新详情
  }

  // 修改或更新店铺信息 
  if (!vdata.type) {
    formUtil.validate(formRef.value).then(() => {
      return reqLoad.addOrUpdate(vdata.storeId, API_URL_MCH_STORE_LIST, vdata.formData)
    }).then(({ bizData }) => { goBack() })
  } else {
    // 同步蚂蚁店铺
    formUtil.validate(formRef.value).then(() => {
      vdata.formData.shopCategory = vdata.formData.shopCategory.join('_')
      if (['99', '031'].includes(vdata.aliStatus)) {
        reqLoad.updateById(API_URI_DEV_RUYI, vdata.storeId, vdata.formData).then(res => {
          goBack()
        })
      } else {
        reqLoad.add(`${API_URI_DEV_RUYI}/${vdata.storeId}`, vdata.formData).then(res => {
          goBack()
        })
      }
    })
  }
}

</script>

<style lang="scss">
.store {

  /*  #ifdef  MP-WEIXIN  */
  jeepay-upload-img[is="components/JeepayUploadImg/JeepayUploadImg"] {
    flex-grow: 1;
  }

  /*  #endif  */

  .upload-wrapper-store {
    padding-top: 40rpx;
  }

  .upload-wrapper-store-last {
    padding-bottom: 40rpx;
  }
}

input {
  font-size: 32rpx;
}

.selected-sex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 32rpx;
  color: #b3b3b3;

  image {
    flex-shrink: 0;
    width: 120rpx;
    height: 120rpx;
  }
}

.selected-sex :nth-child(2) {
  margin: 30rpx 0;
}

.line {
  margin-bottom: 20rpx;
}

.confirm-wrapper {
  padding: 50rpx 30rpx;

  .confirm-button {
    height: 110rpx;
    color: #fff;
    border-radius: 20rpx;
    background: $jeepay-bg-primary;
  }
}

.align-top {
  align-items: flex-start;
  padding: 40rpx 0;
  height: auto;
  min-height: auto;

  image {
    width: 120rpx;
    height: 40rpx;
    transform: rotate(90deg);
  }
}

.border-tb {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    width: 90vw;
    height: 1rpx;
    background-color: #ededed;
  }

  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 10;
    width: 90vw;
    height: 1rpx;
    background-color: #ededed;
  }
}

.left-image {
  width: 120rpx;
  height: 40rpx;
}</style>
